import React from 'react';
// import CheckIcon from '@material-ui/icons/Check';
import ToggleButton from '@material-ui/lab/ToggleButton';
import RemoveIcon from '@material-ui/icons/Remove';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

export default function Directed(props) {
  const [selected, setSelected] = React.useState(false);

  return (
    <ToggleButton
      value="check"
      selected={selected}
      onChange={() => {
          let temp = !selected;
          setSelected(temp);
          props.handleDirect(temp);

      }}
      style={{border:"0", width: "80px", backgroundColor: "#F8F9FA"}}
    >
      {selected ? <RemoveIcon /> : <ArrowRightAltIcon />}
    </ToggleButton>
  );
}
